<template>
	<view class="classlfiCation" >
		<view class="classlfiCation_shaixuan">
				<text :class="shaixuanActive == 0 ? 'classlfiCation_shaixuan_acticve' : ''" @click="tapShaixuan(0)">热销</text>
				<text :class="shaixuanActive == 1 ? 'classlfiCation_shaixuan_acticve' : ''" @click="tapShaixuan(1)">常购</text>
				<text :class="shaixuanActive == 2 ? 'classlfiCation_shaixuan_acticve' : ''" @click="tapShaixuan(2)">上新</text>
			
			
			<view class="fenlei"  >
				<image
				class="img" 
				@click = "layoutWay = !layoutWay"
				:src="layoutWay? xcxImgUrl && xcxImgUrl+'classitys/heng.svg' : xcxImgUrl && xcxImgUrl+'classitys/shu.svg' " 
				style="width: 32rpx;height: 32rpx;">
				</image>
				<view @click="tapShaixuan(3)">
					<text :class="shaixuanActive == 3 ? 'classlfiCation_shaixuan_acticve' : ''">分类筛选
					</text>
					<image
					class="ml5" 
					:src="shaixuanActive != 3 ? xcxImgUrl && xcxImgUrl+'shaixuan.svg' : xcxImgUrl && xcxImgUrl+'shaixuan_active.svg' " 
					style="width: 36rpx;height: 36rpx;vertical-align: middle;">
					</image>
				</view>
			</view>

		</view>
	
		<!-- <view class="classlfiCation_list_top pd_lr10">
			<view class="classlfiCation_list_top_left textOneShow">
				{{commonityClassName}}
			</view>
			<view class="classlfiCation_list_top_right">
				<image 
				@click="showListWay = true"
				v-if="!showListWay"
				style="width: 32rpx;height: 32rpx;" 
				src="/static/classitys/shuangpaizhanshi.svg"></image>
				<image
				@click="showListWay = false"
				v-if="showListWay"
				style="width: 32rpx;height: 32rpx;" 
				src="/static/classitys//danpaizhanshi.svg"></image>
				<view class="classlfiCation_list_top_right_x" @click="tapSort(0)">
					<text :class="sortActive == 0 ? 'classlfiCation_shaixuan_acticve' : ''" >销量</text>
					<view v-if="sortActive == 0" class="classlfiCation_list_top_right_xx ml5">
						<image 
						style="width: 12rpx;height: 8rpx;"
						:src="searchParams.sort == 1 ? '/static/classitys/paixujiantou_active.svg' : '/static//classitys/paixujiantou.svg'"></image>
						<image
						style="width: 12rpx;height: 8rpx;transform: rotate(180deg);"
						:src="searchParams.sort == 2 ? '/static/classitys/paixujiantou_active.svg' : '/static//classitys/paixujiantou.svg'"></image>
					</view>
				</view>
				<view class="classlfiCation_list_top_right_x" @click="tapSort(1)">
					<text :class="sortActive == 1 ? 'classlfiCation_shaixuan_acticve' : ''">价格</text>
					<view v-if="sortActive == 1" class="classlfiCation_list_top_right_xx ml5">
						<image 
						style="width: 12rpx;height: 8rpx;"
						:src="searchParams.sort == 3 ? '/static/classitys/paixujiantou_active.svg' : '/static//classitys/paixujiantou.svg'"></image>
						<image
						style="width: 12rpx;height: 8rpx;transform: rotate(180deg);"
						:src="searchParams.sort == 4 ? '/static/classitys/paixujiantou_active.svg' : '/static//classitys/paixujiantou.svg'"></image>
					</view>
				</view>
			</view>
		</view> -->
		
		<!-- 列表 分类页面>-->
			<!-- #ifndef MP-WEIXIN -->
			<scroll-view
			class="classlfiCation_list" 
			scroll-y
			@scrolltolower="scrolltolower"
			:style="{'height': 'calc(100vh - 88rpx - ' + demoTopHieght + ')'}"
			>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
			<scroll-view
			class="classlfiCation_list"
			 style="margin-top:14rpx"classlfiCation_list
			scroll-y
			@scrolltolower="scrolltolower"
			:style="{'height': 'calc(100vh  - ' + demoTopHieght + ')'}"
			>
			<!-- #endif -->
				<!-- 双排 -->
				<view class="doyoulike_list pd_lr10" v-if="layoutWay">
					<!-- <view style="padding: 10rpx;"
						v-for="(item,index) of commonList"
						@click.stop="goDetails(item)"
						:key="index">
						<guessWhatYouLike :showWay="2" :item="item"></guessWhatYouLike> -->
						
						<view style="width:calc(50% - 10rpx)">
							<view 
							    style="padding: 10rpx 0;"
								v-for="(cnit,index) of commonList"
								
								:key="index"
								v-if="index % 2 ===0">
								<guessWhatYouLike :item="cnit"></guessWhatYouLike>
							</view>
						</view>
						<view  style="width:calc(50% - 10rpx)">
							<view
							 style="padding: 10rpx 0;"
								v-for="(cnit,index) of commonList"
								
								:key="index"
								v-if="index % 2 !==0">
								<guessWhatYouLike :item="cnit"></guessWhatYouLike>
							</view>
						</view>
					
				</view>
				<!-- 单排 -->
				<view class="" v-if="!layoutWay">
					<view
						v-for="(item,index) of commonList"
						
						:key="index">
						<guessWhatYouLike :showWay="1" :item="item"></guessWhatYouLike>
					</view>
				</view>
			</scroll-view>
		
		
	
		<!-- 选择分类弹出层 -->
		<popup
		ref='popus'
		typePage='commonityClassTree'
		:topHeight="topHeight"
		@confirm='confirm'
		@reset='reset'
		height="90%"></popup>
		
	</view>

</template>

<script>
	
	import popup from '@/components/popup/popup.vue'
	import guessWhatYouLike from '@/components/guessWhatYouLike/guessWhatYouLike.vue'
	import {listMobileCommodityPageInfo,
	listMallCommodityClassifyZtree} from '@/api/global.js'
	export default {
		name: "classIfiCation",
		props:{
			demoTopHieght:{
				type:String,
				default:''
			},
			productSearch:{
				type:String,
				default:``
			}
		},
		components:{
			guessWhatYouLike,
			popup
		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		
		data() {
			return {
				shaixuanActive:`-`,//选择的筛选下标
				showPopup:false,//分类筛选显示
				showListWay:false,//切换展示方式
				sortActive:0,//选择的排序下标
				commonityClassName:'全部类别',//商品类名
				commonityPageData:{
					currentPage:1,
					pageSize:10
				},//商品分页
				commonityLastPage:1,
				searchParams:{
					search:'',
					brandId:'',//商品品牌id
					// tag:'',//猜你喜欢类型：[1.按商品销量  2.按商品上架时间  3.按商品点击量  4.自定义]
					// objectType:'',//对象类型[1：商品id 2：商品品牌id 3：商品分类id]
					warehouseId:'',//仓库id[关联仓库表]
					sort:3,
					searchTag:``,//搜索标记[1：正常搜索 2: 热销商品 3:常购商品 4:上新商品]
					classifyId:'',//类别id
				},
				commonList:[],//商品列表
				topHeight:'',//弹出层子组件位置
				layoutWay:true //布局方式
			};
		},
		created() {
			//获取分仓仓库id 没有后台默认全部
			this.searchParams.warehouseId = this?.$store?.state?.warehouseInfo?.warehouseId || '';
			// this.getCommonityList()//获取列表
			
		},
		mounted() {
			
		},
		onShow() {
			console.log(111111);
		},
		provide() {
							return {
								resetList: this.resetList
							}
						},
		
		methods: {
				resetList(){
								this.commonityPageData = {
								currentPage: 1,
								pageSize: 10
								},
								this.getCommonityList()
								},
			//商品类别树重置
			reset(){
				this.searchParams.classifyId = ''
				this.commonityClassName = '全部类别'
				this.searchParams.searchTag = 1
				this.commonList = []
				this.commonityPageData.currentPage = 1;
				this.searchParams.search = this.productSearch;
				this.shaixuanActive = '-';
				this.getCommonityList()
			},
			//商品类别树返回值
			confirm(item){
				console.log(item);
				this.searchParams.classifyId = item && item.length && item[0].commodityClassifyId ?  item[0].commodityClassifyId : ''
				this.commonityClassName = item && item.length && item[0].name ?  item[0].name : ''
				this.searchParams.searchTag = 1
				this.commonList = []
				this.commonityPageData.currentPage = 1;
				this.searchParams.search = this.productSearch;
				this.getCommonityList()
			},
			//获取商品列表
			async getCommonityList(){
			 console.log(222222222);
				uni.showLoading()
				let res = await listMobileCommodityPageInfo({
					...this.searchParams,
					...this.commonityPageData
				})
				if(res.code == 2000){
					uni.hideLoading()
					if(this.commonityPageData.currentPage == 1){
						this.commonList = (res?.data?.info?.list || []).filter(item => item.status !== 2)
					}else{
						this.commonList = (this.commonList.concat(res?.data?.info?.list || [])).filter(item => item.status !== 2)
					}
					this.commonityLastPage = res?.data?.info?.lastPage
					
				}else{
					this.Utils.toast(`${res.msg}`)
				}
				console.log('this.commonList', this.commonList)
			},
			//下拉加载
			scrolltolower(){
				console.log(111111111111,'下拉加载', this.commonityPageData.currentPage, this.commonityLastPage);
				if(this.commonityPageData.currentPage >= this.commonityLastPage){
					return
				}else{
					this.commonityPageData.currentPage++
					this.getCommonityList()
				}
			},
			//点击筛选 0热销 1常购 2上新 3分类
			async tapShaixuan(index){
				console.log(index)
				if(this.shaixuanActive == index){
					this.shaixuanActive = this.shaixuanActive == '-' ? index : '-';
				}else{
					this.shaixuanActive = index;
				}
				console.log(index);
				//如果点击的分类筛选
				if(index == 3){
					if(this.shaixuanActive == 3){
						this.$refs.popus.open();
						let info = uni.createSelectorQuery().in(this).select(".classlfiCation_shaixuan");
						info.boundingClientRect((data) => { //data - 各种参数
							this.topHeight = ((data.top + data.height) ) +'px'
							 console.log(data,this.topHeight);
						}).exec()
					}else{
						this.$refs.popus.close();
						this.reset()
					}
					
				}else{
					this.$refs.popus.close() //关闭分类弹出层
					if(index == 0){
						this.searchParams.searchTag = 2
					}
					if(index == 1){
						this.searchParams.searchTag = 3
					}
					if(index == 2){
						this.searchParams.searchTag = 4
					}
					if(this.shaixuanActive == '-'){
						this.searchParams.searchTag = ``;
					}
					this.searchParams.classifyId = ''
					this.commonityClassName = '全部仓库'
					this.commonList = []
					this.commonityPageData.currentPage = 1
					this.getCommonityList()
				}
			},
			//点击商品去商品详情
			goDetails(item){
				uni.navigateTo({
					url:`/page_public/commodityDetail?commodityId=${item.commodityId}`
				})
			},
			//点击排序 0销量 1价格
			tapSort(index){
				console.log(index,this.searchParams.sort);
				this.sortActive = index
				
				//如果点击的销量
				if(index == 0 && (this.searchParams.sort != 1 && this.searchParams.sort != 2)){
					this.searchParams.sort = 1
					return
				}
				if(index == 0 && this.searchParams.sort == 1){
					this.searchParams.sort = 2
					return
				}
				if(index == 0 && this.searchParams.sort == 2){
					this.searchParams.sort = 1
					return
				}
				//如果点击的价格
				if(index == 1 && (this.searchParams.sort != 3 && this.searchParams.sort != 4)){
					this.searchParams.sort = 3
					return
				}
				if(index == 1 && this.searchParams.sort == 3){
					this.searchParams.sort = 4
					return
				}
				if(index == 1 && this.searchParams.sort == 4){
					this.searchParams.sort = 3
					return
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	
	
	.classlfiCation {
		box-sizing: border-box;
		height: 100%;
		.classlfiCation_shaixuan{
			background-color: #FFF;
			width: 100%;
			height: 88rpx;
			font-size: $font_size_14;
			color: $text_color_808080;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.fenlei{
				display: flex;
				align-items: center;
					.img{
						margin-right: 20rpx;
					}
			}
		}
		.classlfiCation_list_top{
			width: 100%;
			height: 60rpx;
			background-color: #FFF;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.classlfiCation_list_top_left{
				font-size: $font_size_14;
				color: $text_color_333;
				flex: 1;
			}
			.classlfiCation_list_top_right{
				width: 200rpx;
				font-size: $font_size_12;
				color: $text_color_808080;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.classlfiCation_list_top_right_x{
					display: flex;
					
					.classlfiCation_list_top_right_xx{
						display: flex;
						flex-direction:column;
						align-items: center;
						justify-content: space-around;
					}
				}
			}
		}
		.classlfiCation_list{
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
			/* #ifndef APP-PLUS */
			padding-bottom: 100rpx;
			/* #endif */
		}
		.doyoulike_list {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			// grid-gap: 20rpx;
			
			
		}
	}
	
	
	.classlfiCation_shaixuan_acticve{
		color: $text_color_ec4141;
	}
</style>
